<template>
  <div class="operation-area">
    <el-row :gutter="20">
      <!-- 采购区域 -->
      <el-col :xs="24" :sm="12">
        <div class="action-card purchase">
          <div class="card-icon">
            <i class="el-icon-shopping-cart-2"></i>
          </div>
          <div class="card-content">
            <div class="title"><i class="el-icon-shopping-bag-1"></i> 我要采购</div>
            <div class="statistics">
              <div class="stat-item">
                <i class="el-icon-document"></i>
                <span>累计发布需求</span>
                <span class="num highlight">{{ demandCount }}</span>
                <span>条</span>
                <div class="trend-info">
                  <span class="trend-icon up"><i class="el-icon-top"></i></span>
                  <span class="trend-text">较上月增长12%</span>
                </div>
              </div>
              <div class="stat-item">
                <i class="el-icon-data-line"></i>
                <span>本月新增</span>
                <span class="num highlight">{{ monthlyDemand || 0 }}</span>
                <span>条</span>
                <div class="active-users">
                  <el-avatar-group :size="30" :max="3">
                    <el-avatar src="https://avatars.githubusercontent.com/u/1?v=4" />
                    <el-avatar src="https://avatars.githubusercontent.com/u/2?v=4" />
                    <el-avatar src="https://avatars.githubusercontent.com/u/3?v=4" />
                    <el-avatar src="https://avatars.githubusercontent.com/u/4?v=4" />
                  </el-avatar-group>
                  <span class="active-text">最近活跃</span>
                </div>
              </div>
            </div>
            <el-button type="primary" size="large" class="action-btn" @click="$router.push('/login')"
                       v-if="!$store.getters.token">
              <i class="el-icon-key"></i>
              登录后采购！
            </el-button>
            <el-button type="primary" size="large" class="action-btn" @click="goPurchase()"
                       v-else-if="checkRole(['purchaser-Audited','purchaser-retail','purchaser-stratagem','purchaser-guarantor'])">
              <i class="el-icon-shopping-cart-2"></i>
              立即采购
            </el-button>
            <el-button type="primary" size="large" class="action-btn disabled-btn" @click="redirectToAuth"
                       v-else-if="!checkRole(['purchaser-Audited','purchaser-retail','purchaser-stratagem','purchaser-guarantor'])">
              <i class="el-icon-shopping-cart-2"></i>
              无权采购
            </el-button>
          </div>
        </div>
      </el-col>

      <!-- 供货区域 -->
      <el-col :xs="24" :sm="12">
        <div class="action-card supply">
          <div class="card-icon">
            <i class="el-icon-box"></i>
          </div>
          <div class="card-content">
            <div class="title"><i class="el-icon-goods"></i> 我要供货</div>
            <div class="statistics">
              <div class="stat-item">
                <i class="el-icon-goods"></i>
                <span>累计发布产品</span>
                <span class="num highlight">{{ supplyCount }}</span>
                <span>个</span>
                <div class="trend-info">
                  <span class="trend-icon up"><i class="el-icon-top"></i></span>
                  <span class="trend-text">较上月增长15%</span>
                </div>
              </div>
              <div class="stat-item">
                <i class="el-icon-data-line"></i>
                <span>本月新增</span>
                <span class="num highlight">{{ monthlySupply || 0 }}</span>
                <span>个</span>
                <div class="active-users">
                  <el-avatar-group :size="30" :max="3">
                    <el-avatar src="https://avatars.githubusercontent.com/u/5?v=4" />
                    <el-avatar src="https://avatars.githubusercontent.com/u/6?v=4" />
                    <el-avatar src="https://avatars.githubusercontent.com/u/7?v=4" />
                    <el-avatar src="https://avatars.githubusercontent.com/u/8?v=4" />
                  </el-avatar-group>
                  <span class="active-text">最近活跃</span>
                </div>
              </div>
            </div>
            <el-button type="primary" size="large" class="action-btn" @click="$router.push('/login')"
                       v-if="!$store.getters.token">
              <i class="el-icon-key"></i>
              登录后供货
            </el-button>
            <el-button type="primary" size="large" class="action-btn" @click="goSupply()"
                       v-else-if="checkRole(['supplier-retail','supplier-stratagem','supplier-guarantor'])">
              <i class="el-icon-shopping-cart-2"></i>
              立即供货
            </el-button>
            <el-button type="primary" size="large" class="action-btn disabled-btn" @click="redirectToAuth"
                       v-else-if="!checkRole(['supplier-retail','supplier-stratagem','supplier-guarantor'])">
              <i class="el-icon-shopping-cart-2"></i>
              无权供货
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { checkRole } from '@/utils/permission';

export default {
  name: 'OperationArea',
  data() {
    return {
      demandCount: 1472,
      supplyCount: 1472,
      monthlyDemand: 0,
      monthlySupply: 0,
    }
  },
  methods: {
    checkRole,
    redirectToAuth() {
      console.log('点击了无权按钮，跳转到认证页面');
      this.$message({
        message: '您需要先完成商家认证才能进行操作',
        type: 'warning',
        duration: 3000,
        showClose: true
      });
      if (window.checkNoAuthButtonClick) {
        window.checkNoAuthButtonClick();
      } else {
        this.$router.push('/auth');
      }
    },
    goSupply() {
      this.$router.push('/supply/supplypurch/prodinfo/supplyProd');
      setTimeout(() => {
        window.location.reload();
      }, 300);
    },
    goPurchase() {
      this.$router.push('/supply/supplypurch/purchprodinfo');
      setTimeout(() => {
        window.location.reload();
      }, 300);
    }
  }
}
</script>

<style lang="scss" scoped>
.operation-area {
  margin-bottom: 30px;

  .action-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    height: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .card-icon {
      font-size: 32px;
      margin-bottom: 15px;
      color: #1890ff;
    }

    .card-content {
      .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
        color: #303133;

        i {
          margin-right: 8px;
          color: #1890ff;
        }
      }

      .statistics {
        margin-bottom: 25px;

        .stat-item {
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          gap: 10px;

          i {
            color: #1890ff;
            font-size: 18px;
          }

          .num {
            font-size: 24px;
            font-weight: bold;
            color: #1890ff;
          }

          .trend-info {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 5px;

            .trend-icon {
              &.up {
                color: #67c23a;
              }
            }

            .trend-text {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }

      .action-btn {
        width: 100%;
        height: 44px;
        font-size: 16px;
        border-radius: 22px;
        background: linear-gradient(135deg, #1890ff, #1d39c4);
        border: none;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
        }

        &.disabled-btn {
          background: linear-gradient(135deg, #d9d9d9, #bfbfbf);
          cursor: not-allowed;
        }
      }
    }
  }
}
</style> 